<template>
	<div class="personnelList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-sys fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>单店补贴</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="success" class="fl" @click="goAdd()" round size="mini">新增单店补贴</el-button>
					</el-col>
					<el-col :span="22">
						<SubsidySearch @sendValue="searchValue" :options="searchOptions"></SubsidySearch>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="list" stripe>
						<el-table-column type="index" label="编号" align="center"></el-table-column>
						<el-table-column prop="name" label="补贴名称" min-width="100"></el-table-column>
						<el-table-column prop="shop_name" label="执行店铺" min-width="140"></el-table-column>
						<el-table-column prop="city_name" width="100" label="城市"></el-table-column>
						<el-table-column prop="area_name" width="100" label="执行商圈"></el-table-column>
						<el-table-column prop="industry_name" label="所属行业" width="70"></el-table-column>
						<el-table-column prop="label_name" label="岗位名称"></el-table-column>
						<el-table-column prop="shop_name" label="等级" align="center">
							<template>
								<div>黄金</div>
								<div>白银</div>
								<div>青铜</div>
							</template>
						</el-table-column>
						<el-table-column prop="creater_name" label="补贴价格" width="110">
							<template slot-scope="{ row }">
								<div class="danger">-{{ (row.level30 / 100).toFixed(2) }} / 小时</div>
								<div class="danger">-{{ (row.level20 / 100).toFixed(2) }} / 小时</div>
								<div class="danger">-{{ (row.level10 / 100).toFixed(2) }} / 小时</div>
							</template>
						</el-table-column>
						<el-table-column prop="start_time" label="活动开始日期" width="150"></el-table-column>
						<el-table-column prop="end_time" label="活动结束日期" width="150"></el-table-column>
						<el-table-column prop="undertaker" label="成本承担方" width="100" align="center">
							<template slot-scope="{ row }">
								<span v-if="row.undertaker == 1">平台</span>
								<span v-if="row.undertaker == 2">代理商</span>
							</template>
						</el-table-column>
						<el-table-column prop="operate_name" label="状态" width="100">
							<template slot-scope="{ row }">
								<span class="success" v-if="row.status == 1">启用</span>
								<span class="danger" v-else-if="row.status == 2">停用</span>
								<span class="gray" v-else>已过期</span>
							</template>
						</el-table-column>
						<el-table-column prop="creater_name" label="操作人" width="100"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="150"></el-table-column>
						<el-table-column prop="remark" label="备注" min-width="200">
							<template slot-scope="{ row }">
								<span class="remark">{{ row.remark }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="prop" label="操作" width="100" fixed="right">
							<template slot-scope="{ row }">
								<el-link :underline="false" type="info" @click="goAdd(row)">查看</el-link>
								<!-- 代理商不可停用启用平台的补贴 -->
								<el-link
									type="danger"
									:underline="false"
									v-if="
										(row.status == '1' && roleType == 2 && row.undertaker == 2) || (row.status == '1' && roleType == 1)
									"
									@click="redactBtn(row)"
									>停用</el-link
								>
								<el-link
									type="success"
									:underline="false"
									v-if="
										(row.status == '2' && roleType == 2 && row.undertaker == 2) || (row.status == '2' && roleType == 1)
									"
									@click="redactBtn(row)"
									>启用</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :disableMountedFetch="true" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
import SubsidySearch from './components/SubsidySearch.vue'

import { fetchSubsidyShopList, subsidyAreaDisable } from '@/api/subsidy.js'
export default {
	name: 'subsidy-shop',
	data() {
		return {
			// 角色 1 平台 2代理商
			roleType: JSON.parse(sessionStorage.getItem('manageInfo')).user_info.type,
			searchOptions: ['shop', 'city', 'area', 'industry', 'jobType', 'status'],
			list: [], //列表
			query: '',
			//向分页组件传值
			total: 0,
			pageNum: 1,
			pageSizeNow: 20
		}
	},
	components: {
		SubsidySearch
	},
	mounted() {},

	methods: {
		async fetchList() {
			let res = await fetchSubsidyShopList(this.computedParams())
			this.total = res.count
			this.list = res.list
		},

		computedParams(params = {}) {
			let { area_id, ...rest } = this.query
			return {
				...rest,
				area_id: area_id.join(','),
				page: this.pageNum,
				pageSize: this.pageSizeNow,
				...params
			}
		},

		searchValue(val) {
			this.pageNum = 1
			console.log(val)
			this.query = val
			this.fetchList()
		},

		goAdd(row) {
			let data = {
				identity: 'shop'
			}
			if (row) data.id = row.id

			this.$router.push({
				path: '/subsidyAdd',
				query: data
			})
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.fetchList()
		},

		// 状态转换
		async redactBtn(row) {
			console.log(row)
			try {
				let ret = await this.$confirm(
					`确认要${row.status == '1' ? '停用' : '启用'}【${row.shop_name}】该商家补贴吗？`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				)
				if (ret === 'cancel') return
				await subsidyAreaDisable({
					id: row.id,
					status: +row.status === 1 ? 2 : 1
				})
				this.$message.success('操作成功')
				this.fetchList()
			} catch (err) {
				console.log(err)
			}
		}
	}
}
</script>

<style scoped lang="scss">
.success {
	color: green !important;
}
.danger {
	color: red !important;
}
.gray {
	color: #999999 !important;
}
.remark {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
</style>



// WEBPACK FOOTER //
// src/components/subsidy/Shop.vue